pointerEvents="none" doesn't work for all SVG elements, weird behaviour for the SVG elements touch accessibility · Issue #1290 · software |
您所在的位置：网站首页 › react native svg › pointerEvents="none" doesn't work for all SVG elements, weird behaviour for the SVG elements touch accessibility · Issue #1290 · software |
|
Bug
Scenario 1: pointerEvents="none" doesn't work with react-native-svg SVG elements. For example, when we have rectangle on top of all elements and want to disable touchable behaviour for it to get an access to inner SVG elements we can't click on any SVG element, because Rectangle still blocks clicks. Scenario 2: For example, we are trying to find a workaround for Scenario 1 to run touch events on elements under the top SVG Rectangle, and we just drow 4 Lines to emulate Rectangle. Lines should not block click events, as it is not a complete shape. But 4 Lines still block clicks. Even if we draw 2 Lines (top and right side) we can't click on SVG element on the top-right area on this SVG element. Looks like 2 Lines block click events on top-right triangle area. I'm using PanResponder, not just simple onPress events. Both issues are available on iOS/Android. pointerEvents="box-none" doesn't work toо and even throws an exception. Unexpected behavior react-native init CleanProject cd CleanProject/ yarn add react-native-svg cd ios && pod install && cd .. modify App.js -> run the appUse this code in App.js: Scenario 1 with simple onPress callbacks: { alert(' onPress'); }} x={50} y={50} width={400} height={400} href={{ uri: 'https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg' }}/> { alert(' onPress'); }} x={0} y={0} width={500} height={500} strokeWidth={10} stroke="#ccc" fill="transparent"/>Scenario 1 with PanResponser callbacks: true} onMoveShouldSetResponder={() => true} onMoveShouldSetPanResponderCapture={() => true} onStartShouldSetPanResponderCapture={() => true} onResponderGrant={() => alert(' Grant')} onResponderMove={() => alert(' Move')} x={50} y={50} width={400} height={400} href={{ uri: 'https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg' }}/> false} onMoveShouldSetResponder={() => false} onResponderGrant={() => alert(' Grant')} onResponderMove={() => alert(' Move')} x={0} y={0} width={500} height={500} strokeWidth={10} stroke="#ccc" fill="transparent"/>Scenario 2: (Only bottom-left triangle area on Image is clickable) true} onMoveShouldSetResponder={() => true} onMoveShouldSetPanResponderCapture={() => true} onStartShouldSetPanResponderCapture={() => true} onResponderGrant={() => alert(' Grant')} onResponderMove={() => alert(' Move')} x={50} y={50} width={400} height={400} href={{ uri: 'https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg' }}/> Environment infoReact native info output: System: OS: macOS 10.15.3 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Memory: 1.57 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.14.1 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 27.0.3, 28.0.3 System Images: android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild npmPackages: @react-native-community/cli: 3.0.4 => 3.0.4 react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5 npmGlobalPackages: react-native-cli: 2.0.1Library version: 11.0.1 Steps To Reproduce Click on image on all scenarios.Describe what you expected to happen: Image should be clickable in all scenarios with simple onPress or PanResponder callbacks.@msand Could you please check this issue? I know that pointerEvents issues were added and closed many times, but this is the very important feature on complex SVG panes with dynamic touch interactions with PanResponder mechanism. We have 6 places in our project with workarounds for broken pointerEvents, but now for current case we can't do anything else. Thanks a lot. |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |